<template>
	<view class="home-container">
		<!-- 顶部搜索栏 -->
		<view class="header">
			<view class="header-top">
				<view class="location-info" @tap="toCity">
					<image class="location-icon" src="@/static/icon/定位白.png" />
					<text class="location-text">{{ currentCity }}</text>
				</view>

				<view class="search-box">
					<image class="search-icon" src="@/static/icon/搜索灰.png" />
					<input v-model="keyword" class="search-input" type="text" placeholder="搜索理发师"
						@input="onSearch" />
				</view>
			</view>
		</view>

		<!-- 快捷功能导航 -->
		<view class="quick-nav">
			<view class="nav-item" v-for="item in navItems" :key="item.id" @tap="onNavTap(item)">
				<view class="nav-icon-wrapper">
					<!-- <image class="nav-icon" :src="item.icon" /> -->
					<!-- <view class="nav-badge" v-if="item.badge">{{ item.badge }}</view> -->
				</view>
				<text class="nav-text">{{ item.name }}</text>
			</view>
		</view>

		<!-- 轮播图 -->
		<view class="banner-section">
			<swiper class="banner-swiper" indicator-dots indicator-color="rgba(255,255,255,0.5)"
				indicator-active-color="#fef4ec" circular :autoplay="true" :interval="4000" :duration="500">
				<swiper-item v-for="item in bannerList" :key="item.id" @tap="onBannerTap(item)">
					<view class="banner-item">
						<image class="banner-img" :src="item.image" mode="aspectFill" />
						<view class="banner-overlay">
							<text class="banner-title">{{ item.title }}</text>
							<text class="banner-subtitle">{{ item.subtitle }}</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 热门推荐 -->
		<view class="section-header">
			<text class="section-title">热门理发师</text>
			<text class="section-more" @tap="toDetail">查看更多</text>
		</view>

		<!-- 理发师列表 -->
		<scroll-view scroll-y class="barber-list" :refresher-enabled="true" :refresher-triggered="refreshing"
			@refresherrefresh="onRefresh" @scrolltolower="onLoadMore">
			<view class="barber-card" v-for="(item, index) in filteredBarbers" :key="index" @tap="toBarber">
				<view class="card-header">
					<image class="barber-avatar" :src="item.avatar" />
					<view class="barber-info">
						<view class="barber-name-wrap">
							<text class="barber-name">{{ item.name }}</text>
							<image class="loc-icon" src="@/static/icon/定位灰.png" />
							<text class="shop-name">{{ item.shop }}</text>
						</view>
						<view class="barber-tags">
							<text class="tag" v-for="(tag, index) in item.tags" :key="tag"
								:class="'tag-' + index">{{ tag }}</text>
						</view>
					</view>
					<!-- <view class="favorite-btn" :class="{ liked: item.liked }" @tap.stop="toggleFavorite(item)">
            <image class="heart-icon" :src="item.liked ? heartFilled : heartOutline" />
          </view> -->
				</view>

				<view class="card-content">
					<text class="barber-desc">{{ item.desc }}</text>
				</view>

				<view class="card-footer">
					<view class="price-info">
						<text class="price">￥{{ item.price }}</text>
						<text class="price-unit">起</text>
					</view>

					<view class="stats">
						<text class="rating">⭐ {{ item.rating }}</text>
						<text class="count">{{ item.count }}单</text>
						<view class="favorite-btn" :class="{ liked: item.liked }" @tap.stop="toggleFavorite(item)">
							<image class="heart-icon" :src="item.liked ? heartFilled : heartOutline" />
						</view>
					</view>
				</view>



				<!-- 浮动操作按钮 -->
				<!-- <view class="card-actions">
          <view class="action-btn" @tap.stop="contactBarber">
            <image class="action-icon" src="/static/icon/剪刀.png" />
          </view>
        </view> -->
			</view>

			<!-- 加载更多 -->
			<view class="load-more" v-if="loading">
				<text class="load-text">加载中...</text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, computed } from 'vue'

	// 接口定义
	interface BannerItem {
		id : string
		image : string
		title : string
		subtitle : string
		link ?: string
	}

	interface NavItem {
		id : string
		name : string
		icon ?: string
		badge ?: string
		route : string
	}

	interface Barber {
		id : string
		name : string
		shop : string
		desc : string
		price : number
		count : number
		avatar : string
		liked : boolean
		rating : number
		tags : string[]
	}
	
	const keyword = ref('')
	// 过滤后的理发师列表
	const filteredBarbers = computed(() => {
	  const kw = keyword.value.trim().toLowerCase()
	  if (!kw) return barberList.value
	  return barberList.value.filter(
	    b =>
	      b.name.toLowerCase().includes(kw) ||
	      b.shop.toLowerCase().includes(kw) ||
	      b.desc.toLowerCase().includes(kw)
	  )
	})
	// 搜索输入事件（可留空，computed 会自动更新）
	const onSearch = () => {}


	// 响应式数据
	const currentCity = ref('柳州市')
	const refreshing = ref(false)
	const loading = ref(false)

	// 轮播图数据
	const bannerList = ref<BannerItem[]>([
		{
			id: '1',
			image: '/static/Carousel/4.jpg',
			title: '',
			subtitle: '',
			link: '/pages/subpackages/Index/barber/barber_detail'
		},
		{
			id: '2',
			image: '/static/Carousel/5.jpg',
			title: '',
			subtitle: '',
			link: '/pages/subpackages/Index/barber/barber_detail'
		},
		{
			id: '3',
			image: '/static/Carousel/6.jpg',
			title: '',
			subtitle: '',
			link: '/pages/subpackages/Index/barber/barber_detail'
		}
	])

	// 导航菜单
	const navItems = ref<NavItem[]>([
		{ id: '1', name: '收藏', route: '/pages/subpackages/Index/collect/collect' },
		{ id: '2', name: '推荐', route: '/pages/subpackages/Index/Recommend/recommend' },
		{ id: '3', name: '理发师', route: '/pages/subpackages/Index/barber/barber' },
		{ id: '4', name: '驿站点', route: '/pages/subpackages/Index/Stop/stop' }
	])

	// 理发师数据
	const barberList = ref<Barber[]>([
		{
			id: '1',
			name: '李晓华',
			shop: '柳州万象城1号店',
			desc: '专业理发师，拥有10年从业经验，擅长男士发型设计和儿童理发，服务态度好，技术精湛',
			price: 199,
			count: 1699,
			avatar: '/static/Avatar/李晓华.png',
			liked: false,
			rating: 4.9,
			tags: ['优质快剪', '儿童理发', '男士造型']
		},
		{
			id: '2',
			name: '戴少华',
			shop: '柳州市城中区东环大道256号',
			desc: '资深染发专家，精通各种染发技术和发型设计，曾为多位明星打造经典造型，口碑极佳',
			price: 1199,
			count: 2899,
			avatar: '/static/Avatar/戴少华.png',
			liked: true,
			rating: 4.8,
			tags: ['专业染发', '明星造型', '高级定制']
		},
		{
			id: '3',
			name: '程凯',
			shop: '柳州市鱼峰区文林路3号职教园友邻会店',
			desc: '儿童理发专家，温柔耐心，深受小朋友喜爱，专门为儿童设计安全舒适的理发环境',
			price: 199,
			count: 1200,
			avatar: '/static/Avatar/程凯.png',
			liked: false,
			rating: 4.7,
			tags: ['儿童理发', '耐心细致', '安全舒适']
		},
		{
			id: '4',
			name: '徐权友',
			shop: '柳州市五星步行街花旗一号楼',
			desc: '烫染技术专家，拥有丰富的造型经验，能够根据客户脸型和气质设计最适合的发型',
			price: 1199,
			count: 2100,
			avatar: '/static/Avatar/徐权友.png',
			liked: true,
			rating: 4.6,
			tags: ['专业烫染', '造型设计', '个性定制']
		}
	])

	// 图标路径
	const heartFilled = '/static/icon/爱心粉.png'
	const heartOutline = '/static/icon/爱心灰.png'

	// 页面跳转方法
	const toCity = () => {
		uni.navigateTo({ url: '/pages/subpackages/Index/city' })
	}

	const toSearch = () => {
		uni.navigateTo({ url: '/pages/search' })
	}

	const toDetail = () => {
		uni.navigateTo({ url: '/pages/subpackages/Index/barber/barber' })
	}

	const toBarber = () => {
		uni.navigateTo({ url: '/pages/subpackages/Index/barber/barber_detail' })
	}

	// 轮播图点击事件
	const onBannerTap = (item : BannerItem) => {
		if (item.link) {
			uni.navigateTo({ url: item.link })
		}
	}

	// 导航点击事件
	const onNavTap = (item : NavItem) => {
		uni.navigateTo({ url: item.route })
	}

	// 切换收藏状态
	const toggleFavorite = (barber : Barber) => {
		barber.liked = !barber.liked

		// 添加震动反馈
		// if (barber.liked) {
		//   uni.vibrateShort({
		//     type: 'light'
		//   })
		// }

		// 添加动画效果和提示
		uni.showToast({
			title: barber.liked ? '❤️ 已收藏' : ' 已取消收藏',
			icon: 'none',
			duration: 1500,
			mask: true
		})
	}

	// 联系理发师
	const contactBarber = () => {
		uni.showActionSheet({
			itemList: ['立即预约', '查看详情', '电话咨询'],
			success: (res) => {
				switch (res.tapIndex) {
					case 0:
						uni.navigateTo({ url: '/pages/subpackages/Index/barber/barber_detail' })
						break
					case 1:
						uni.navigateTo({ url: '/pages/subpackages/Index/barber/barber_detail' })
						break
					case 2:
						uni.showToast({
							title: '功能开发中',
							icon: 'none'
						})
						break
				}
			}
		})
	}

	// 下拉刷新
	const onRefresh = () => {
		refreshing.value = true

		// 模拟网络请求
		setTimeout(() => {
			refreshing.value = false
			uni.showToast({
				title: '刷新成功',
				icon: 'success',
				duration: 1500
			})
		}, 1500)
	}

	// 加载更多
	const onLoadMore = () => {
		if (loading.value) return

		loading.value = true

		// 模拟加载更多数据
		setTimeout(() => {
			loading.value = false
			uni.showToast({
				title: '加载完成',
				icon: 'none',
				duration: 1000
			})
		}, 1000)
	}

	// 页面加载完成
	onMounted(() => {
		// 初始化数据
		console.log('首页加载完成')

		/* === 1. 监听城市变化 === */
		uni.$on('cityChanged', (city : string) => {
			currentCity.value = city
		})

		/* === 2. 组件卸载时取消监听（可选，建议保留）=== */
		// onUnmounted(() => {
		//   uni.$off('cityChanged')
		// })
	})
</script>

<style scoped>
	/* 全局容器 */
	.home-container {
		background: #f1f1f1;
		/* background:linear-gradient(to bottom right, #fdb436, #fef5da); */
		min-height: 100vh;
	}

	/* 顶部搜索栏 */
	.header {
		background: #f1f1f1;
		padding: 20rpx 30rpx 30rpx;
	}

	.header-top {
		display: flex;
		align-items: center;
		gap: 12rpx;
	}

	.location-info {
		display: flex;
		align-items: center;
		padding: 12rpx 16rpx;
		background-color: #fd091f;
		/* background: rgba(255, 255, 255, 0.3); */
		border-radius: 20rpx;
		backdrop-filter: blur(10rpx);
		border: 1rpx solid rgba(187, 152, 98, 0.2);
		white-space: nowrap;
		flex-shrink: 0;
	}

	.location-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 8rpx;
	}

	.location-text {
		font-size: 28rpx;
		color: #ffffff;
		font-weight: 500;
	}

	.arrow-down {
		width: 24rpx;
		height: 24rpx;
	}

	.notification {
		position: relative;
		padding: 12rpx;
		background: rgba(255, 255, 255, 0.3);
		border-radius: 50%;
		backdrop-filter: blur(10rpx);
		border: 1rpx solid rgba(187, 152, 98, 0.2);
	}

	.notification-icon {
		width: 32rpx;
		height: 32rpx;
	}

	.notification-badge {
		position: absolute;
		top: 8rpx;
		right: 8rpx;
		width: 16rpx;
		height: 16rpx;
		background: #BB9862;
		border-radius: 50%;
		border: 2rpx solid #F1F1F1;
		box-shadow: 0 0 8rpx rgba(187, 152, 98, 0.6);
	}

	.search-container {
		margin-top: 10rpx;
	}

	.search-box {
		display: flex;
		align-items: center;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 25rpx;
		padding: 12rpx 24rpx;
		box-shadow: 0 4rpx 12rpx rgba(187, 152, 98, 0.08);
		border: 1rpx solid rgba(253, 9, 31);
		backdrop-filter: blur(10rpx);
		flex: 1;
	}

	.search-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 16rpx;
	}

	.search-placeholder {
		font-size: 28rpx;
		color: rgba(28, 28, 28, 0.5);
		flex: 1;
	}

	/* 轮播图 */
	.banner-section {
		margin: 30rpx;
		margin-top: 0rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.banner-swiper {
		height: 320rpx;
	}

	.banner-item {
		position: relative;
		height: 100%;
	}

	.banner-img {
		width: 100%;
		height: 100%;
	}

	.banner-overlay {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: linear-gradient(transparent, rgba(28, 28, 28, 0.7));
		padding: 40rpx 30rpx 30rpx;
	}

	.banner-title {
		display: block;
		font-size: 36rpx;
		color: #BB9862;
		font-weight: 600;
		margin-bottom: 8rpx;
		text-shadow: 0 2rpx 4rpx rgba(28, 28, 28, 0.5);
	}

	.banner-subtitle {
		font-size: 24rpx;
		color: rgba(187, 152, 98, 0.95);
		text-shadow: 0 2rpx 4rpx rgba(28, 28, 28, 0.5);
	}

	/* 快捷导航 */
	.quick-nav {
		width: auto;
		height: 6px;
		display: flex;
		/* 中部导航背景色 */
		/* background: #ffffff; */
		background: linear-gradient(to bottom right, #fd091f, #fd3143, #fdc4ca);
		margin: 0 30rpx 30rpx;
		border-radius: 20rpx;
		padding: 40rpx 0;
		backdrop-filter: blur(10rpx);
	}

	.nav-item {
		flex: 1 1 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		min-width: 0;
	}

	.nav-icon-wrapper {
		position: relative;
		margin-bottom: 2rpx;
	}

	/* .nav-icon {
  width: 64rpx;
  height: 10rpx;
  padding: 8px; */
	/* 中部导航圆形底部 */
	/* background: linear-gradient(to right bottom, #fac77f, #fcebca);
  border-radius: 50%; */
	/* } */

	.nav-badge {
		position: absolute;
		top: -8rpx;
		right: -8rpx;
		background: #BB9862;
		color: #FFFFFF;
		font-size: 20rpx;
		padding: 4rpx 8rpx;
		border-radius: 10rpx;
		font-weight: 600;
		box-shadow: 0 2rpx 8rpx #fef4ec;
	}

	.nav-text {
		font-size: 26rpx;
		color: #FFFFFF;
		font-weight: 500;
	}

	/* 分区标题 */
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 30rpx 20rpx;
	}

	.section-title {
		font-size: 36rpx;
		color: #1f1f1f;
		font-weight: 600;
		text-shadow: 0 2rpx 4rpx rgba(212, 165, 116, 0.3);
	}

	.section-more {
		font-size: 26rpx;
		color: #1f1f1f;
		padding: 8rpx 16rpx;
		border: 2rpx solid #1f1f1f;
		border-radius: 20rpx;
		background: F1F1F1;
	}

	/* 理发师列表 */
	.barber-list {
		height: calc(100vh - 660rpx);
		width: calc(100vw - 60rpx);
		padding: 0 30rpx 0rpx 30rpx;
	}

	.barber-card {
		background: #FFFFFF;
		/* background:linear-gradient(to bottom right, #fd091f, #f1f1f1); */
		border-radius: 20rpx;
		margin-bottom: 24rpx;
		padding: 30rpx;
		/* box-shadow: 0 4rpx 20rpx #fef4ec; */
		/* border: 1rpx solid rgba(187, 152, 98, 0.15); */
		position: relative;
		transition: all 0.3s ease;
		backdrop-filter: blur(10rpx);
		/* margin-right: 20rpx; */
	}

	.barber-card:active {
		transform: scale(0.98);
	}

	.card-header {
		display: flex;
		align-items: flex-start;
		margin-bottom: 20rpx;
	}

	.barber-avatar {
		width: 110rpx;
		height: 110rpx;
		border-radius: 60rpx;
		margin-right: 24rpx;
		/* border: 4rpx solid rgba(187, 152, 98, 0.2); */
		/* box-shadow: 0 4rpx 12rpx rgba(187, 152, 98, 0.15); */
	}

	.barber-info {
		flex: 1;
		margin-right: 12rpx;
		min-width: 0;
	}

	.barber-name {
		font-size: 32rpx;
		color: #1C1C1C;
		font-weight: 600;
		margin-bottom: 12rpx;
		flex-shrink: 0;
		text-shadow: 0 2rpx 4rpx rgba(187, 152, 98, 0.2);
	}

	.barber-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 8rpx;
	}

	.barber-name-wrap {
		display: flex;
		align-items: center;
		gap: 8rpx;
		margin-bottom: 12rpx;
		min-width: 0;
	}

	/* 定位 */
	.loc-icon {
		width: 28rpx;
		height: 28rpx;
		margin-top: -10rpx;
		flex-shrink: 0;
	}

	/* 地址 */
	.shop-name {
		font-size: 26rpx;
		margin-top: -10rpx;
		color: #666;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		flex: 1;
	}

	.tag {
		/* 热门理发师标签 */
		/* background: linear-gradient(to right bottom, #fd091f, #f1f1f1); */
		color: #ffffff;
		font-size: 20rpx;
		padding: 6rpx 12rpx;
		border-radius: 12rpx;
		font-weight: 500;
		box-shadow: 0 2rpx 8rpx rgba(187, 152, 98, 0.25);
	}

	.tag-0 {
		background: linear-gradient(to right bottom, #fd1409, #f1f1f1) !important;
	}

	/* 第二个标签 */
	.tag-1 {
		background: linear-gradient(to right bottom, #fd5909, #e8f5e9) !important;
	}

	/* 第三个标签*/
	.tag-2 {
		background: linear-gradient(to right bottom, #fdbb09, #e3f2fd) !important;
	}

	.favorite-btn {
		position: static;
		width: 40rpx;
		height: 40rpx;
	}

	.heart-icon {
		width: 40rpx;
		height: 40rpx;
		transition: all 0.3s ease;
		filter: drop-shadow(0 2rpx 4rpx rgba(187, 152, 98, 0.25));
	}

	.heart-icon:hover {
		transform: scale(1.2);
	}

	.favorite-btn.liked .heart-icon {
		animation: heartBeat 0.6s ease-in-out;
		/* filter: drop-shadow(0 0 8rpx rgba(187, 152, 98, 0.8)); */
	}

	@keyframes heartBeat {
		0% {
			transform: scale(1);
		}

		25% {
			transform: scale(1.3);
		}

		50% {
			transform: scale(1.1);
		}

		75% {
			transform: scale(1.2);
		}

		100% {
			transform: scale(1);
		}
	}

	.card-content {
		margin-bottom: 20rpx;
	}

	.barber-desc {
		font-size: 26rpx;
		color: rgba(74, 74, 74, 0.7);
		line-height: 40rpx;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.card-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* margin-right: 20rpx; */
	}

	.price-info {
		display: flex;
		align-items: baseline;
	}

	.price {
		font-size: 40rpx;
		color: #1f1f1f;
		font-weight: 600;
		text-shadow: 0 2rpx 4rpx rgba(187, 152, 98, 0.2);
	}

	.price-unit {
		font-size: 24rpx;
		color: #1f1f1f;
		margin-left: 4rpx;
	}

	.stats {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.rating {
		font-size: 26rpx;
		color: #eea700;
		font-weight: 500;
	}

	.count {
		font-size: 24rpx;
		color: rgba(78, 78, 78, 0.6);
	}

	.card-actions {
		position: absolute;
		right: 30rpx;
		bottom: 30rpx;
	}

	.action-btn {
		width: 60rpx;
		height: 60rpx;
		background: linear-gradient(135deg, #BB9862, #D4B896);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 12rpx rgba(187, 152, 98, 0.3);
		border: 2rpx solid rgba(187, 152, 98, 0.5);
	}

	.action-icon {
		width: 32rpx;
		height: 32rpx;
	}

	/* 加载更多 */
	.load-more {
		text-align: center;
		padding: 40rpx;
	}

	.load-text {
		font-size: 26rpx;
		color: rgba(187, 152, 98, 0.7);
	}

	/* 响应式适配 */
	@media screen and (max-width: 750rpx) {
		.barber-list {
			height: calc(100vh - 550rpx);
		}
	}
</style>